<template>
  <div>
    <div class="box">
      <el-form label-width="120px">
        <el-form-item label="上传方式">
          <el-select v-model="uploadType" placeholder="请选择" @change="uploadTypeChange">
            <el-option
              v-for="item in optionsUpload"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>

    </div>

    <div v-if="uploadType=='2'" class="box" style="width: 800px;">
      <el-form label-width="120px" :model="aliyunForm">
        <el-form-item label="AccessKey">
          <el-input v-model="aliyunForm.accessKey"></el-input>
        </el-form-item>
        <el-form-item label="AccessKeySecret">
          <el-input v-model="aliyunForm.accessKeySecret"></el-input>
        </el-form-item>
        <el-form-item label="Endpoint">
          <el-input v-model="aliyunForm.endpoint"></el-input>
        </el-form-item>
        <el-form-item label="BucketName">
          <el-input v-model="aliyunForm.bucketName"></el-input>
        </el-form-item>
        <el-form-item label="访问域名">
          <el-input v-model="aliyunForm.domain"></el-input>
        </el-form-item>
        <el-form-item label="存储目录">
          <el-input v-model="aliyunForm.uploadDir"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSaveAliyunOss">立即保存</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
  import {getUploadType,getAliyunOssConfig,setAliyunOssConfig} from '@/api/sysconfig.js'
  export default {
    name: 'UploadConfig',
    data() {
      return {
        optionsUpload: [
          {value: '1',label: '自建文件服务器'},
          {value: '2',label: '阿里云OSS'},
        ],
        uploadType: '2',
        aliyunForm: {

        }
      }
    },
    mounted() {
      this.loadUploadConfig()
    },
    methods: {
      loadUploadConfig() {
        getUploadType().then(res => {
          console.log('getUploadType', res);
          this.uploadType = res.data.value
          if(this.uploadType == '2') {
            this.loadAliyunOssConfig()
          }
        })
      },
      loadAliyunOssConfig() {
        getAliyunOssConfig().then(res => {
          console.log('getAliyunOssConfig', res);
          if(res.code == 200) {
            this.aliyunForm = res.data
          }
        })
      },
      uploadTypeChange(val) {
        console.log('uploadTypeChange', val)
      },
      handleSaveAliyunOss() {
        console.log('handleSaveAliyunOss')
        setAliyunOssConfig(this.aliyunForm).then(res => {
          if(res.code == 200) {
            this.$message.success('保存设置成功')
            this.loadUploadConfig()
          }
          else {
            let msg = res.msg
            this.$message.error(msg)
          }
        })
      }
    }
  }
</script>

<style scoped>
  .box {
    margin: 10px;
  }
</style>
